<template>
  <div>
    我是{{ name }}，今天我很{{ happy ? '开心' : '不开心' }} 测试{{ nums }}
    <div @click="changeHappy">改变心情</div>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'

const name = ref('jerry')
const happy = ref(true)
const nums = ref({
  test1: 'x',
  test2: 'y'
})
const changeHappy = () => {
  happy.value = !happy.value
  name.value = happy.value ? 'tom' : 'jerry'
  nums.value.test1 = happy.value ? 'a' : 'b'
}
// 深度侦听
watch(nums, (newValue) => {
  console.log('watch--深度侦听被修改了', newValue.test1)
}, {deep: true, immediate: true})
//精准侦听
watch(() => nums.value.test1, (newValue, oldValue) => {
  console.log('watch--精准侦听nums被修改了', newValue, oldValue)
})


/*export default {
  name: "App",
  data() {
    return {
      name: 'jerry',
      happy: true,
      nums: {
        test1: 'x',
        test2: 'y'
      }
    }
  },
  watch: {
    // happy(newValue, oldValue) {
    //   console.log('watch--1haapy被修改了', newValue, oldValue)
    // }
    // 深度侦听
    nums: {
      immediate: true,// 初始化时让handler调用一下
      deep: true,// 深度监听
      handler(newValue, oldValue) {
        console.log('watch--深度侦听-被修改了', newValue, oldValue)
      }
    },
    // 精确侦听
    'nums.test1': {
      handler(newValue, oldValue) {
        console.log('watch--深度侦听-被修改了', newValue, oldValue)
      }
    }
  },
  methods: {
    changeHappy() {
      this.happy = !this.happy
      this.nums.test1 = this.happy ? 'a' : 'b'
    }
  }
}*/
</script>

<style scoped>

</style>
